歷經了前面的摧殘(?)
是不是都快睡著了呢 ZZZ

今天來用目前學到的所有來寫一個倒數計時器吧XD

這邊在 codesandbox 中建置這個微型專案
首先先建立一個新的專案，選 react

砍掉 App.js 內的預設值，新增名為 Counter.js 的檔案
在 Counter.js 依序從 react 匯入 useEffect 跟 useState
並增加 Counter 要 return 的 jsx

Counter.js

import { useState , useEffect} from 'react';
export default function Counter() {
  return (
    <>
      <h1>
        10/10/{new Date().getFullYear()}
        <br />
        倒數計時器
      </h1>
      <p>
        距離 10/10 還有{}天 {}時 {}分 {}秒
      </p>
    </>
  );
}

回到 App.js 匯入 Counter 元件
App.js

import "./styles.css";
import Counter from "./Counter.js";

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

到 Counter.js 中新增函式 calulateTimeLeft
calulateTimeLeft 的目的為獲取當下時間與設定時間之間的時間差

export default function Counter() {
  function calulateTimeLeft() {
    let year = new Date().getFullYear(); // 獲取現在的年份
    let month = new Date().getMonth(); // 

    let different = null;
    let timeLeft = {};

    // 如果現在的月份已經超過10月，則算到下一年 若現在月份沒有超過10月，則用今年的年份來計算
    if (month > 10) {
      different = new Date(`${10}/${10}/${year + 1}`) - new Date();
    } else {
      different = new Date(`${10}/${10}/${year}`) - new Date();
    }

    if (different > 0) {
      timeLeft = {
        days: Math.floor(different / (1000 * 60 * 60 * 24)),
        hours: Math.floor((different / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((different / (1000 * 60)) % 60),
        seconds: Math.floor((different / 1000) % 60)
      };
    }

    return timeLeft;
  }

  // 以 calulateTimeLeft 回傳值 初始化距離 10/10 剩下的時間
  const [timeLeft, setTimeLeft] = useState(calulateTimeLeft());


  return (
    <>
      <h1>
        10/10/{new Date().getFullYear()}
        <br />
        倒數計時器
      </h1>
      <p>
        距離 10/10 還有{timeLeft.days}天 {timeLeft.hours}時 {timeLeft.minutes}分{" "}
        {timeLeft.seconds}秒
      </p>
    </>
  );
}

這時候就可以看到視窗上顯示出距離 10/10 的時間了！

codesandbox在這裡

不過現在的狀態只會得到剛執行完後距離 10/10 的時間，並沒有真的隨著時間經過而倒數
接下來接續寫每秒 update 倒數時間的部分..